import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Icon, Popover, WhiteSpace, Modal, InputItem, Tabs } from 'antd-mobile';
import NavBar from 'components/navBar';
import FriendItem from 'components/friendItem';
import GroupItem from 'components/groupItem';
import styled from 'styled-components';
import * as friendActions from 'actions/friend';
import { getId } from 'utils/tools';

const Item = Popover.Item;

const Wrapper = styled.ul`
    background-color: #fff;
    border-bottom: 1px solid #ddd;
`
@connect(state => ({
    user: state.login.user
}), dispatch => ({
    friendActions: bindActionCreators(friendActions, dispatch)
}))
@withRouter
export default class Friend extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false
        }
    }
   
    handleClick = (id, type) => {
        this.props.history.push(`/chat/${type}/${id}`);

    }
    handleFriendClick = friend => {
        this.props.history.push({
            pathname: `/chat/person/${friend._id}`,
            state: {
                name: friend.name,
                avatar: friend.avatar
            }
        })
    }
    handleGroupClick = group => {
        this.props.history.push({
            pathname: `/chat/group/${group._id}`,
            state: {
                name: group.name,
                avatar: group.avatar
            }
        })
    }
    handleCreate = () => {
        this.setState({
            visible: true
        })
    }
    render() {
        const { user } = this.props;
        const { friends = [], groups = [] } = user;
        const { visible } = this.state;
        const tabs = [
            {
                title: <span>好友</span>
            },
            {
                title: <span>群组</span>
            }
        ]
        return (
            <div>
                <NavBar
                    leftContent={user.name}
                    rightContent={
                        <Popover
                            overlay={[
                                <Item key='friend'><Link to='/addFriend'>加好友</Link></Item>,
                                <Item key='group'><Link to='/addGroup'>加群组</Link></Item>,
                                <Item key='create'><a href='javascript:void(0);' onClick={this.handleCreate}>创建群组</a></Item>
                            ]}
                        >
                            <Icon type='plus'/>
                        </Popover>
                    }
                >
                    联系人
                </NavBar>
                <WhiteSpace />
                <WhiteSpace />
                <Tabs tabBarPosition='top' tabs={tabs} animated={false}>
                    <Wrapper>
                    {
                        friends.map(list => {
                            const friend = list.from._id === user.id ? { ...list.to } : { ...list.from };                           
                            return (
                                <FriendItem key={friend._id} 
                                    name={friend.name}
                                    avatar={friend.avatar}
                                    desc={friend.desc}
                                    onClick={() => { this.handleFriendClick(friend, 'person'); }}
                                />
                            )
                        })
                    }
                    </Wrapper>  
                    <Wrapper>
                        {
                            groups.map(group => {
                                return (
                                    <GroupItem key={group._id} 
                                    name={group.name}
                                    avatar={group.avatar}
                                    onClick={() => { this.handleGroupClick(group, 'group'); }}
                                />
                                )
                            })
                        }
                    </Wrapper>     
                </Tabs>
                
                    
                {
                    !!visible && <GroupModal visible={visible} id={user.id}/>
                }
            </div>
        )
    }
}

class GroupModal extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    handleChange = value => {
        this.setState({
            name: value
        })
    }
    render() {
        const { name } = this.state;
        const { visible } = this.props;
        return (
            <Modal
                visible={visible}
                closable={true}
                footer={[{text: '确定', onPress: () => {console.log('ok')}}]}
            >
                <div>
                    aaaaaaaa
                    {/* <InputItem value={name} onChange={this.handleChange}/> */}
                </div>
            </Modal>
        )
    }
}